import React, {useEffect, useState} from 'react'
import {Button, Tag, Popconfirm} from 'antd'

import {connect, history} from 'umi'

import styles from './index.less'
import SearchForm from '@/components/SearchForm'
import CustomTable from '@/components/Table'

import {auditStatus} from '../../../dict'

const formItemLayout = {
	labelCol: {flex: '110px'},
	wrapperCol: {flex: '1'},
}

const commodityPlan = (props: any) => {
	const {rentDriverVOList, callBack} = props
	const [formData, setFormData] = useState<any[]>([])
	// const [searchData, setSearchData] = useState({})
	const [list, setList] = useState<any[]>([])

	// 取消关联
	const onDisassociateFun = (record: any) => {
		callBack(record)
	}

	const columns: any = [
		{
			title: '序号',
			dataIndex: 'order',
			align: 'center',
			width: 70,
			render(text: any, record: any, index: any) {
				return <span>{index + 1}</span>
			},
		},
		{
			title: '活动编码',
			dataIndex: 'activityCode',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <span>{text || '--'}</span>,
		},
		{
			title: '活动名称',
			dataIndex: 'activityName',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => <span>{text || '--'}</span>,
		},
		{
			title: '有效时间',
			dataIndex: 'beginTime',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any, record: any) => (
				<span>
					{record?.beginTime || '--'}-{record?.endTime || '--'}
				</span>
			),
		},
		{
			title: '状态',
			dataIndex: 'auditStatus',
			align: 'center',
			width: 150,
			ellipsis: true,
			render: (text: any) => {
				if (typeof Number(text) === 'number') {
					const obj: any = auditStatus?.filter(
						(item: {key: any; label: any}) =>
							Number(item.key) === Number(text),
					)
					return <Tag color="processing">{obj[0].label || '--'}</Tag>
				}
				return <Tag color="processing">{text || '--'}</Tag>
			},
		},
		{
			title: '操作',
			key: 'action',
			align: 'center',
			fixed: 'right',
			width: 250,
			render: (text: any, record: any) => (
				<div>
					<Button
						type="link"
						size="small"
						onClick={() => {
							history.push({
								pathname:
									'/merchantCenter/driverRewardRules/detail',
								query: {
									type: 'audit',
									id: record?.awardCode,
								},
							})
						}}>
						详情
					</Button>
					<Popconfirm
						placement="topLeft"
						title="你确定要取消关联吗？"
						onConfirm={() => onDisassociateFun(record)}
						okText="确定"
						cancelText="取消">
						<Button type="link" size="small">
							取消关联
						</Button>
					</Popconfirm>
				</div>
			),
		},
	]

	// 初始化分页
	useEffect(() => {
		setList(() => rentDriverVOList)
	}, [rentDriverVOList])

	// 搜索
	const onFinish = (values: any) => {
		const params = rentDriverVOList
			?.filter((item: any) => {
				if (!values.activityCode) {
					return true
				}
				return item?.activityCode?.includes(values.activityCode)
			})
			?.filter((item: any) => {
				if (!values.activityName) {
					return true
				}
				return item?.activityName?.includes(values.activityName)
			})
		setList(() => params)
		// setSearchData(values)
	}

	// 搜索重置
	const onReset = () => {
		setList(() => rentDriverVOList)
		// setSearchData({})
	}
	useEffect(() => {
		const formItems: any[] = [
			{
				type: 'group',
				key: 'group1',
				groupItems: [
					{
						type: 'input',
						label: '活动编码',
						name: 'activityCode',
						key: 'activityCode',
					},
					{
						type: 'input',
						label: '活动名称',
						name: 'activityName',
						key: 'activityName',
					},
					{},
				],
			},
		]
		setFormData(formItems)
	}, [])

	return (
		<div className={styles.page}>
			<div className="search">
				{formData && (
					<SearchForm
						onFinish={onFinish}
						onReset={onReset}
						formItems={formData}
						formLayout={formItemLayout}
					/>
				)}
			</div>
			<div className="table">
				<CustomTable columns={columns} dataSource={list} />
			</div>
		</div>
	)
}
export default connect(({user}: any) => ({
	user,
}))(commodityPlan)
